<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2023-05-17 16:06:06
 * @LastEditors: hongweixun
 * @LastEditTime: 2023-07-10 10:31:46
-->
<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2023-05-17 16:06:06
 * @LastEditors: hongweixun
 * @LastEditTime: 2023-05-18 11:30:41
-->
<template>
  <div class="pay-count-box">
    <Title>收费统计分析</Title>
    <el-row :gutter="20" class="select-compair-box">
      <el-col :span="12">
        <SelectCom
          :value="firstSelect"
          placeholder="输入/选择学校名称"
          @click="changeVal"
        ></SelectCom>
      </el-col>
      <el-col :span="12" style="width: 100%;">
        <el-date-picker
          v-model="value2"
          :editable="false"
          :prefix-icon="dateImg"
          style="width: 100%;"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          range-separator="至"
          value-format="YYYY-MM-DD"
          type="daterange"
          @change="dateChange"
        />
      </el-col>
    </el-row>
    <!-- pie -->
    <el-row :gutter="20" style="padding-bottom: 30px;">
      <el-col :span="12">
        <div id="container"></div>
      </el-col>
      <el-col :span="12" style="margin-top: 20px;">
        <el-row class="money-box-flex">
          <el-col :span="24">
            收费总金额
          </el-col>
          <el-col :span="24">
            <CountTo
              :start="props.payStartCount"
              :end="props.payEndCount"
              :autoPlay="true"
              :duration="1500"
              class="3"
              :prefix="Number(props.payEndCount) == 0 ? '' : '+'"
              suffix=""
            />
          </el-col>
        </el-row>
        <el-row class="row-common-box">
          <el-row class="row-common-box">
            <el-col :span="24" class="padding-left-common">
              <div class="position-circle-box">学校名称</div>
            </el-col>
            <el-col :span="24" class="padding-left-common">{{
              store.schoolStatistics.school_name
            }}</el-col>
          </el-row>
          <el-row class="row-common-box">
            <el-col :span="12" class="padding-left-common">
              <div class="position-circle-box">总人数</div>
              <CountTo
                :start="0"
                :end="store.schoolStatistics.totalStudent"
                :autoPlay="true"
                :duration="1500"
                class="4"
                prefix=""
                suffix=""
              />
            </el-col>
            <el-col :span="12" class="padding-left-common">
              <div class="position-circle-box">注册人数</div>
              <CountTo
                :start="0"
                :end="store.schoolStatistics.countReg"
                :autoPlay="true"
                :duration="1500"
                class="4"
                prefix=""
                suffix=""
              />
            </el-col>
          </el-row>
          <el-row class="row-common-box">
            <el-col :span="12" class="padding-left-common">
              <div class="position-circle-box">收费总额</div>
              <CountTo
                :start="0"
                :end="parseFloat(store.schoolStatistics.sum_pay_sum_total)"
                :autoPlay="true"
                :duration="1500"
                class="4"
                prefix="￥"
                suffix=""
              />
            </el-col>
            <el-col :span="12" class="padding-left-common">
              <div class="position-circle-box">办理比率</div>
              <CountTo
                :start="0"
                :end="parseFloat(store.schoolStatistics.banli_lv)"
                :autoPlay="true"
                :duration="1500"
                :default="2"
                class="4"
                prefix=""
                suffix="%"
              />
            </el-col>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Pie } from '@antv/g2plot'
import dateImg from './Common/IconDatePicker.vue'
import SelectCom from './Common/SelectCom.vue'
import canvasImg from '../assets/images/ikon_yuan@2x.png'
import { PiniaStore } from '../store/index'
interface PropsType {
  //   是否需要更多按钮
  canvasHeight?: any
  payStartCount: any
  payEndCount: any
}
const props = withDefaults(defineProps<PropsType>(), {
  canvasHeight: 320,
  payStartCount: 0,
  payEndCount: 0
})
interface EmitType {
  (e: 'click', obj: any): void
}
const emit = defineEmits<EmitType>()
const store = PiniaStore()
const piePlot2 = ref<any>(null)
const choiceColor = ref<any>('#48ffb2')
const firstSelect = ref<any>('')
const secondVal = ref<any>('2023-05-18')
const value2 = ref<any>('')
const changeVal = (val: any) => {
  firstSelect.value = val
  // payQuery.value.school_id = val
  const params = {
    type: 'id',
    school_id: val
  }
  emit('click', params)
}
const dateChange = (date: any) => {
  let params: any = null
  if (date !== null) {
    secondVal.value = date
    params = {
      type: 'date',
      start_time: date[0],
      end_time: date[1]
    }
  } else {
    params = {
      type: 'date',
      start_time: '',
      end_time: ''
    }
  }
  emit('click', params)
}
const init = () => {
  const data = store.payStatistics.list
  if (piePlot2.value) {
    piePlot2.value.changeData(data)
    return false
  }
  piePlot2.value = new Pie('container', {
    appendPadding: 0,
    data,
    height: props.canvasHeight - 150,
    angleField: 'sum_pay_sum_total',
    colorField: 'school_name',
    legend: false,
    label: false,
    radius: 0.8,
    innerRadius: 0.64,
    statistic: null as any,
    annotations: [
      {
        type: 'image',
        src: canvasImg,
        /** 位置 */
        position: ['50%', '50%'],
        /** 图形样式属性 */
        style: {
          width: 100,
          height: 100
        },
        /** x 方向的偏移量 */
        offsetX: -50,
        /** y 方向的偏移量 */
        offsetY: 22
      }
    ],
    tooltip: {
      fields: [
        'school_name',
        'sum_pay_sum_total',
        'sum_pay_number',
        'old_sum_pay_sum_total',
        'old_sum_pay_number'
      ],
      // 处理弹窗数值展示
      formatter: datum => {
        // 如果是写死的常量则可以不进行声明
        return {
          name: datum.school_name,
          value: datum.sum_pay_sum_total,
          sum_pay_number: datum.sum_pay_number,
          sum_pay_sum_total: datum.sum_pay_sum_total,
          old_sum_pay_sum_total: datum.old_sum_pay_sum_total,
          old_sum_pay_number: datum.old_sum_pay_number
        }
      },
      // 自定义 item 模板：每项记录的默认模板，自定义模板时必须包含各个 dom 节点的 class。
      itemTpl: `
    <li class="g2-tooltip-list-item">
      <span class="g2-tooltip-marker" style="background-color: {color};"></span>
      <span class="g2-tooltip-name">{name}</span>:
      <span class="g2-tooltip-value">{value}元</span>
      <span class="g2-tooltip-name" style="display: block;margin-top: 10px;">新生支付人数：</span>
      <span class="g2-tooltip-value" style="display: block;margin-top: -12px;">{sum_pay_number}人</span>
      <span class="g2-tooltip-name" style="display: block;margin-top: 10px;">新生支付金额：</span>
      <span class="g2-tooltip-value" style="display: block;margin-top: -12px;">{sum_pay_sum_total}元</span>
      <span class="g2-tooltip-name" style="display: block;margin-top: 10px;">老生支付人数：</span>
      <span class="g2-tooltip-value" style="display: block;margin-top: -12px;">{old_sum_pay_number}人</span>
      <span class="g2-tooltip-name" style="display: block;margin-top: 10px;">老生支付金额：</span>
      <span class="g2-tooltip-value" style="display: block;margin-top: -12px;">{old_sum_pay_sum_total}元</span>
    </li>
  `,
      position: 'right',
      offset: 70
    },
    color: [
      '#55cda0',
      '#c2e7da',
      '#6959ee',
      '#e9b317',
      '#f291bb',
      '#8c5ab2',
      '#618de6',
      '#49d26d',
      '#fca12f'
    ],
    interactions: [{ type: 'element-single-selected' }]
  })

  piePlot2.value.render()
  piePlot2.value.on('element:click', (args: any) => {
    choiceColor.value = args.data.color
    // choiceName.value = args.data.data.type
    store.setSchoolStatistics(args.data.data)
    firstSelect.value = ''
    // const start = sysEndCount.value
    // sysStartCount.value = start
    // sysEndCount.value = args.data.data.value
  })
}
onMounted(() => {
  setTimeout(() => {
    // init()
  }, 1500)
})
defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.pay-count-box {
  .select-compair-box {
    padding: 20px;
  }
}
.money-box-flex {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: var(--el-text-color-regular);
  padding: 15px 20px;
  font-size: 18px;
}
.row-common-box {
  width: 100%;
  margin-top: 10px;
}
.padding-left-common {
  padding: 0 15%;
  color: var(--el-text-color-regular);
  font-size: 16px;
  .position-circle-box {
    font-size: 14px;
    position: relative;
    margin-bottom: 5px;
    &::before {
      content: '';
      width: 10px;
      height: 10px;
      background-color: v-bind('choiceColor');
      left: -20px;
      top: 5px;
      position: absolute;
    }
  }
}
</style>
<style lang="scss">
.el-input__suffix-inner {
  width: 20px;
}
.el-input__wrapper {
  width: 100%;
}
</style>
